<template>
    <view class="popup">
        <view class="popup1" @tap="close"></view>
        <view class="popup2">
            <view class="popup4">
                <view class="popup5">
                    <view class="txt_up">
                        <view class="gb_txt" @tap="close">
                            <image src="/static/images/close.png" mode="widthFix" class="close"></image>
                        </view>
                    </view>
                </view>
                <view class="kdcon">
                    <view class="spimg">
                        <image :src="detailClone.goodsepc[cur].pic" mode="aspectFill"></image>
                        <view class="rcon">
                            <view>
                                <view>
                                    <span>￥</span>
                                    {{
                                        detail.goodsepc.length > 0
                                            ? user.vip == 0
                                                ? detail.goodsepc[cur].price
                                                : detail.goodsepc[cur].vip_price
                                            : user.vip == 0
                                            ? detail.price
                                            : detail.vip_price
                                    }}
                                </view>
                            </view>
                            <view>
                                {{ detailClone.name }}
                            </view>
                            <view>
                                已选：
                                <span>{{ detailClone.label }}</span>
                            </view>
                        </view>
                    </view>

                    <view class="sepc1">
                        <view class="specnum">数量</view>
                        <view class="specnum1">
                            <image src="/static/images/jian.png" mode="widthFix" @tap="jian" class="jian"></image>
                            <input type="number" placeholder="0" :disabled="true" v-model="numbersClone" class="numbers" />
                            <image src="/static/images/jia.png" mode="widthFix" @tap="jia" class="jian"></image>
                        </view>
                    </view>
                    <scroll-view :scroll-y="true" class="txtn5" v-if="detailClone.goodsepc.length > 0">
                        <view class="txtn1">规格</view>
                        <scroll-view :scroll-y="true" class="txtn3">
                            <view class="txtn4">
                                <view :class="cur == index ? 'actives' : ''" @tap="swidths" :data-cur="index" v-for="(item, index) in detailClone.goodsepc" :key="index">
                                    <view :class="'zstxt ' + (cur == index ? 'zstxt1' : '')">{{ item.name }}</view>
                                </view>
                            </view>
                        </scroll-view>
                    </scroll-view>
                </view>
                <view class="addbtn1" v-if="state == 1">
                    <view @tap="conform" data-cur="2">选择好了</view>
                </view>
                <view class="addbtn" v-else>
                    <view @tap="conform" data-cur="0">加入购物车</view>
                    <view @tap="conform" data-cur="1">立即购买</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            host: app.globalData.img_urls,
            img_src: app.globalData.img_src,
            price: '',
            image: '',

            sku: [
                {
                    name: '精选2斤大果【单果20-30g】',
                    price: 8.9
                },
                {
                    name: '精选3斤大果【单果20-30g】',
                    price: 8.9
                },
                {
                    name: '特级2斤大果【单果30-35g】',
                    price: 8.9
                }
            ],

            cur: 0,
            cur1: 0,
            num_stock: 0,

            sku1: [
                {
                    name: '无糖'
                },
                {
                    name: '正常'
                },
                {
                    name: '少糖'
                }
            ],

            user: '',
            navBarHeight: '',
            menuRight: '',
            menuBotton: '',
            menuHeight: '',
            numbersClone: '',

            detailClone: {
                goodsepc: '',
                name: '',
                label: ''
            },

            pic: ''
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        title: {
            type: String,
            default: ''
        },
        type: {
            type: String,
            default: ''
        },
        cart_list: {
            type: Array,
            default: ''
        },
        state: {
            type: Number,
            default: ''
        },
        //  sku: {
        //     type: Array,
        //     value: "",
        // },
        numbers: {
            type: Number,
            default: 1
        },
        detail: {
            type: Object,
            default: 1
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
        attached: function () {
            const that = this;
            this.setData({
                user: uni.getStorageSync('user')
            });
            // 获取系统信息
            const systemInfo = uni.getSystemInfoSync();
            // 胶囊按钮位置信息
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
            this.setData({
                navBarHeight: (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight,
                menuRight: systemInfo.screenWidth - menuButtonInfo.right,
                menuBotton: menuButtonInfo.top - systemInfo.statusBarHeight,
                menuHeight: menuButtonInfo.height
            });
        },

        jian() {
            this.numbers--;
            this.setData({
                numbersClone: this.numbers < 0 ? 0 : this.numbers
            });
        },

        jia() {
            this.numbers++;
            if (this.numbers > this.detail.goodsepc[this.cur].num) {
                this.numbers = this.detail.goodsepc[this.cur].num;
                app.globalData.show('不能超出当前商品库存' + this.detail.goodsepc[this.cur].num);
                return true;
            }
            this.setData({
                numbersClone: this.numbers
            });
        },

        swidths(e) {
            //////console.log(e)
            var cur = e.currentTarget.dataset.cur;
            var sku = this.sku;
            this.setData({
                cur: cur
            });
            this.$emit('swidths', {
                detail: cur
            });
        },

        swidths1(e) {
            //////console.log(e)
            var cur = e.currentTarget.dataset.cur;
            var cur1 = e.currentTarget.dataset.cur1;
            this.detail.param_key[cur].param.forEach(function (item, index) {
                item.checks = false;
            });
            this.detail.param_key[cur].param[cur1].checks = true;
            this.setData({
                cur1: cur1,
                detailClone: this.detail
            });
            ////console.log(this.detailClone)
        },

        close(e) {
            this.$emit('close', {
                detail: 0
            });
        },

        // this.triggerEvent('jump',num)
        conform(e) {
            var cur = e.currentTarget.dataset.cur;
            if (this.numbers == 0) {
                app.globalData.show('请选择数量');
                return true;
            }
            if (this.detail.goodsepc.length > 0) {
                if (this.numbers > this.detail.goodsepc[this.cur].num) {
                    app.globalData.show('不能超出当前商品库存' + this.detail.goodsepc[this.cur].num);
                    return true;
                }
            } else {
                if (this.numbers > this.detail.num) {
                    app.globalData.show('不能超出当前商品库存' + this.detail.num);
                    return true;
                }
            }
            if (this.detail.goodsepc.length > 0) {
                var gid = this.detail.goodsepc[this.cur].id;
            } else {
                var gid = 0;
            }
            this.$emit('conform', {
                detail: {
                    gid: gid,
                    numbers: this.numbers,
                    cur: cur,
                    id: this.detail.id,
                    name: this.detail.goodsepc[this.cur].name,
                    shop_id: this.detail.shop_id
                }
            });
        }
    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {},
    watch: {
        numbers: {
            handler: function (newVal, oldVal) {
                this.numbersClone = newVal;
            },

            immediate: true
        },

        detail: {
            handler: function (newVal, oldVal) {
                this.detailClone = newVal;
            },

            immediate: true,
            deep: true
        }
    }
};
</script>
<style>
.popup {
    width: 100%;
    height: 100vh;
    display: table;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10000000;
}
.popup1 {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0px;
    left: 0px;
}
.popup2 {
    width: 100%;
    height: auto;
    display: table;
    position: absolute;
    bottom: 0%;
    left: 0%;
}
.popup3 {
    width: 100%;
    min-height: 200px;
    display: table;
    position: relative;
    background-color: #fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    box-sizing: border-box;
    padding: 0px 3%;
}
.popup4 {
    width: 100%;
    min-height: 200px;
    display: table;
    position: relative;
    background-color: #fff;
    border-radius: 10px 10px 0px 0px;
    box-sizing: border-box;
    padding: 0px 10px;
}
.popup5 {
    width: 100%;
    box-sizing: border-box;
    padding: 0px 10px;
}
.txt_up {
    width: 100%;
    height: auto;
    display: table;
    font-size: 17px;
    font-family: PingFang;
    font-weight: bold;
    color: #111111;
    line-height: 45px;
    box-sizing: border-box;
    position: relative;
    text-align: center;
}
.gb_txt {
    width: 45px;
    height: 45px;
    display: table;
    position: absolute;
    top: -60px;
    right: -16px;
}
.gb_txt > image {
    width: 30px;
    height: auto;
    display: table;
    margin: auto;
    margin-top: 14.5px;
}
.kd_con {
    width: 100%;
    height: 300px;
    display: table;
    box-sizing: border-box;
    padding: 10px;
    background-color: #f7f7f8;
}
.kd_nr {
    width: 100%;
    height: auto;
    display: table;
    font-size: 14px;
    color: #868686;
    padding: 10px 0px;
    padding-top: 0px;
}
.nd_con {
    width: 100%;
    height: auto;
    display: table;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10px;
    position: relative;
    margin-bottom: 15px;
}
.nd_con1 {
    width: 100%;
    height: auto;
    display: table;
    position: relative;
}
.nd_con1 > view:nth-child(1) {
    width: auto;
    height: 30px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111111;
    line-height: 30px;
}
.nd_con1 > view:nth-child(2) {
    width: auto;
    height: 30px;
    display: table;
    float: right;
    font-size: 16px;
    color: #ff3100;
    line-height: 30px;
    font-weight: bold;
    padding-right: 35px;
}
.ys_txt {
    width: 100%;
    height: auto;
    display: flex;
    font-size: 13px;
    color: #ababab;
    line-height: 22px;
}

.ys_txt > image {
    width: 18px;
    height: auto;
    display: inline-block;
    margin: 0px 7px;
    margin-top: 3px;
}
.check_btn {
    width: 24px;
    height: 24px;
    display: table;
    position: absolute;
    top: 2px;
    right: 0px;
}
.nd_ip {
    width: 94%;
    height: 45px;
    border-radius: 5px;
    background-color: #f7f7f8;
    box-sizing: border-box;
    padding: 0px 10px;
    font-size: 15px;
    color: #333;
    margin-top: 30px;
    margin-left: 3%;
}
.dk_qr {
    width: 94%;
    height: 45px;
    display: table;
    border-radius: 5px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 45px;
    background-color: rgba(252, 247, 241, 1);
    margin: 30px;
    margin-left: 3%;
    margin-bottom: 20px;
}

.dk_qr1 {
    width: 94%;
    height: 40px;
    display: table;
    border-radius: 5px;
    font-size: 16px;
    color: #111;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    margin-left: 3%;
    margin-top: 0px;
    margin-bottom: 20px;
}
.imglist {
    width: 100%;
    height: 95px;
    display: inline-block;
}
.imglist1 {
    width: 100%;
    height: auto;
    display: table;
}
.imglist1 {
    width: 94%;
    height: auto;
    display: table;
    margin-left: 3%;
    margin-top: 10px;
}
.imglist1 > view {
    width: 31%;
    height: 82px;
    border-radius: 5px;
    float: left;
    margin-bottom: 10px;
    margin-right: 3.5%;
    position: relative;
}
.imglist1 > view:nth-child(3n) {
    margin-right: 0px;
}
.sc_img {
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    position: relative;
}
.img_add {
    width: 30px;
    height: auto;
    display: table;
    margin: auto;
    margin-top: 25px;
}
.imgwx {
    width: 100%;
    height: 100%;
    display: table;
}
.wx_btn {
    width: 22px;
    height: auto;
    display: table;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 100;
}
.sc_txt {
    width: 94%;
    margin-left: 3%;
    height: auto;
    display: table;
    font-size: 12px;
    color: #a7a8aa;
    line-height: 22px;
}
.conram {
    width: 100%;
    height: 120px;
    border-radius: 5px;
    background-color: #f5f6f9;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    color: #333;
}
.kdtxt {
    width: 100%;
    height: 45px;
    display: table;
    border-bottom: 0.5px solid #ededed;
}
.kdtxt > view:nth-child(1) {
    width: 25%;
    height: 45px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111;
    line-height: 45px;
}
.kdtxt > input {
    width: 75%;
    height: 45px;
    display: table;
    float: left;
    font-size: 16px;
    color: #111;
    line-height: 45px;
}
.kdcon {
    width: 94%;
    height: auto;
    display: table;
    margin: 15px 3%;
}
.spimg {
    width: 100%;
    height: 70px;
    display: table;
    position: relative;
    box-sizing: border-box;
    padding-left: 80px;
}
.spimg > image {
    width: 70px;
    height: 70px;
    border-radius: 5px;
    position: absolute;
    top: 0px;
    left: 0px;
}
.price {
    width: 100%;
    height: 70px;
    display: table;
    font-size: 40rpx;
    font-family: PingFang;
    font-weight: bold;
    color: #ee321f;
    line-height: 70px;
}
.price > span {
    font-size: 14px;
    font-weight: 500;
}
.txtn1 {
    width: 100%;
    height: auto;
    display: table;
    font-size: 16px;
    color: #222222;
    font-weight: bold;
    line-height: 40px;
}
.txtn3 {
    width: 100%;
    max-height: 200px;
    margin-bottom: 10px;
}
.txtn2 {
    width: 100%;
    height: auto;
    display: table;
}
.txtn2 > view {
    width: 31%;
    height: auto;
    display: table;
    float: left;
    margin: 5px 0px;
    margin-right: 3.5%;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    overflow: hidden;
    border-radius: 5px;
}
.txtn2 > view:nth-child(3n) {
    margin-right: 0px;
}
.txtn2 > view > image {
    width: 100%;
    height: auto;
    display: table;
}
.zstxt {
    width: 100%;
    height: auto;
    display: table;
    font-size: 13px;
    color: #222;
    background-color: #eee;
    line-height: 26px;
    text-align: center;
    box-sizing: border-box;
    padding: 0px 10px;
    background: #f6f6f6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.actives {
    background-color: #e0332b !important;
}
.zstxt1 {
    color: #fff !important;
    background: #e0332b !important;
}
.sepc {
    width: 100%;
    height: 40px;
    display: table;
}
.sepc > view {
    width: 15%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    float: left;
    margin-right: 2%;
    background-color: #f5f6f8;
    border: 1px solid #f5f6f8;
    box-sizing: border-box;
}
.sepc > view:nth-child(6n) {
    margin-right: 0px;
}
.actives1 {
    background-color: #fff !important;
    border: 1px solid rgba(252, 247, 241, 1) !important;
    color: rgba(252, 247, 241, 1) !important;
}
.specnum {
    width: auto;
    height: auto;
    display: table;
    float: left;
    font-size: 16px;
    font-family: PingFang;
    font-weight: bold;
    color: #222222;
    line-height: 45px;
}
.sepc1 {
    width: 100%;
    height: auto;
    display: table;
    margin: 15px 0px;
}
.specnum1 {
    width: auto;
    height: 35px;
    display: table;
    float: right;
    position: relative;
    border-radius: 50px;
    background-color: #f5f6f8;
}
.jian {
    width: 35px;
    height: 35px;
    display: table;
    float: left;
}
.numbers {
    width: 50px;
    height: 35px;
    display: table;
    float: left;
    font-size: 15px;
    color: #222;
    text-align: center;
}
.addbtn {
    width: 95%;
    height: 45px;
    display: table;
    margin-left: 2.5%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.addbtn > view {
    width: 48%;
    height: 45px;
    display: table;
    line-height: 45px;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: bold;
    color: #ffffff;
    border-radius: 50px;
}
.addbtn > view:nth-child(1) {
    float: left;
    background: linear-gradient(-90deg, #0b0b0b 0%, #3a3a3a 100%);
}

.addbtn > view:nth-child(2) {
    float: right;
    background: linear-gradient(-90deg, #e0332b 0%, #fa7943 100%);
}
.zstxt2 {
    font-size: 20rpx !important;
    margin-left: 5px;
}
.zstxt3 {
    font-size: 30rpx !important;
}
.rcon {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.rcon > view {
    width: 100%;
    height: auto;
    display: table;
}
.rcon > view:nth-child(2) {
    width: 100%;
    height: auto;
    display: table;
    margin-bottom: 5px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.rcon > view:nth-child(2) > view {
    width: auto;
    height: auto;
    display: table;
    padding: 0px 5px;
    border-radius: 5px;
    float: left;
    background-color: rgba(224, 51, 43, 0.2);
    margin-right: 5px;
    font-size: 24rpx;
    font-family: PingFang;
    font-weight: 400;
    color: #e0332b;
    line-height: 25px;
}
.rcon > view:nth-child(3) {
    width: 100%;
    height: auto;
    display: table;
    font-size: 28rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #161616;
    margin-bottom: 5px;
    font-size: 24rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #aaabad;
}
.rcon > view:nth-child(1) {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}
.rcon > view:nth-child(1) > view:nth-child(1) {
    width: auto;
    height: auto;
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: bold;
    color: #ff301a;
    margin-right: 10px;
}
.rcon > view:nth-child(1) > view:nth-child(1) > span {
    font-size: 12px;
}
.rcon > view:nth-child(1) > view:nth-child(2) {
    padding: 0px 10px;
    border-radius: 3px;
    background-color: #eeeeee;
    font-size: 22rpx;
    font-family: PingFang;
    font-weight: 500;
    color: #222;
    line-height: 22px;
}
.txtn4 {
    width: 100%;
    height: auto;
    display: table;
}
.txtn4 > view {
    width: auto;
    height: auto;
    display: inline-block;
    float: left;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    overflow: hidden;
    border-radius: 5px;
    margin-right: 3.5%;
    margin-bottom: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
/* .txtn4>view:nth-child(3n){
  margin-right: 0px !important;
} */
.txtn4 > view > image {
    width: 100%;
    height: auto;
    display: table;
}

.addbtn1 {
    width: 95%;
    height: 45px;
    display: table;
    margin-left: 2.5%;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}
.addbtn1 > view {
    width: 100%;
    height: 45px;
    display: table;
    line-height: 45px;
    text-align: center;
    font-size: 30rpx;
    font-family: PingFang;
    font-weight: bold;
    color: #ffffff;
    border-radius: 50px;
}
.addbtn1 > view:nth-child(1) {
    float: right;
    background: linear-gradient(-90deg, #e0332b 0%, #fa7943 100%);
}
</style>
